<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画过渡</title>
    <style type="text/css">
        #text-transition div{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }

        #text-transition div:hover{
            width: 843px;
            height: 240px;
            background-image: url("../image/动画效果1.png");
            transition: width 5s ease-in 1s, background-color 3s ease 0s;
        }
    </style>
</head>
<body>

<section id="text-transition"><div></div></section>


</body>
</html>